<template>
    <div class="warp" style="height:100%;">
        <navbar :title="$t('mall_1')"></navbar>
        <div class="content-noBottom" style="padding-top: 0;">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getMallList"
                >
                    <div class="mall-list" @click="isSizer = false">
                        <div class="mall-info">
                            <div class="bg-banner"></div>
                            <div class="user-credit">
                                <span v-html="$t('mall_2', {'value': userCredit})"></span>
                            </div>
                        </div>
                        <div class="mall-top" :class="{'is-fixed': isFixed}" id="boxFixed">
                            <div class="top-bar">
                                <div @click="$router.push('/mall/ConvertibleMallList')">
                                    <span><i class="iconfont icon-shangpin" style="font-size: 20px"></i></span>
                                    <span>{{ $t('mall_3') }}</span>
                                </div>
                                <div @click="$router.push('/mall/MallTopList')">
                                    <span><i class="iconfont icon-duihuan" style="font-size: 20px"></i></span>
                                    <span>{{ $t('mall_4') }}</span>
                                </div>
                            </div>
                            <div class="type-bars">
                                <div class="type-bar" @click.stop>
                                    <div class="flex-center" @click="isSizer = !isSizer">
                                        <span>{{ $t('mall_5') }}</span>
                                        <i class="iconfont icon-zhankai" style="font-size: 16px"></i>
                                    </div>
                                    <div class="flex-center handle-bar">
                                        <div class="flex-center" @click="selectSort(1, 'imp_exchange')" :class="{'isSelectSort' : selectData.selectSortIndex === 1}">
                                            <span>{{ $t('mall_6') }}</span>
                                            <i class="iconfont icon-paixu" style="font-size: 16px"></i>
                                        </div>
                                        <div class="flex-center" @click="selectSort(2, 'imp_createtime')" :class="{'isSelectSort' : selectData.selectSortIndex === 2}">
                                            <span>{{ $t('mall_7') }}</span>
                                            <i class="iconfont icon-paixu" style="font-size: 16px"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="sizer-body" v-show="isSizer" @click.stop>
                                    <div class="sizer-box" @touchmove.prevent @click="isSizer = false"></div>
                                    <div class="sizer-info" >
                                        <div class="type-scope">
                                            <div>{{ $t('mall_8') }}</div>
                                            <div class="type-list">
                                                <div class="list-item" v-for="(item,index) in creditScopeList" :key="index" @click="selectData.selectCredit = index" :class="{'isSelect' : selectData.selectCredit === index}">{{ $t(item.name) }}</div>
                                            </div>
                                        </div>
                                        <div class="type-scope">
                                            <div>{{ $t('mall_9') }}</div>
                                            <div class="type-list">
                                                <div class="list-item" v-for="item in mallTypeList" :key="item.imcId" @click="selectData.selectMallType = item.imcId" :class="{'isSelect' : selectData.selectMallType === item.imcId}">{{ item.imcId === 0 ? $t(item.imcName) : item.imcName }}</div>
                                            </div>
                                        </div>
                                        <div class="type-btn" style="text-align: center">
                                            <van-button type="info" round size="small" @click="confirmSelect">{{ $t('mall_10') }}</van-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <mall :mall-list="list" :style="{'margin-top': isFixed ? '100px' : '0'}"></mall>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import { Button } from 'vant';
import Mall from './Mall';
export default {
    name: 'MallList',
    components: {
        Mall,
        vanButton: Button
    },
    data() {
        return {
            total: 0,
            pageNo: 0,
            list: [],
            userCredit: 0,
            isSizer: false,
            isFixed: false,
            offsetTop: 190,
            creditScopeList: [
                {start: null, end: null, name: 'mall_11'},
                {start: null, end: 100, name: 'mall_12'},
                {start: 100, end: 300, name: 'mall_13'},
                {start: 300, end: 500, name: 'mall_14'},
                {start: 500, end: 1000, name: 'mall_15'},
                {start: 1000, end: null, name: 'mall_16'}
            ],
            mallTypeList: [
                {imcId: 0, imcName: 'mall_11'}
            ],
            selectData: {
                selectCredit: 0,
                selectMallType: 0,
                sortname: null,
                sortorder: null,
                selectSortIndex: 0
            },
            isLoading: false,
            finished: false,
            isRefresh: false
        };
    },
    created() {
        this.onPulldownTop();
        this.getUserCredit();
        this.getMallTypeList();
    },
    methods: {
        selectSort(index, name) {
            this.selectData.sortname = name;
            if (index === this.selectData.selectSortIndex) {
                if (index === 2) {
                    this.selectData.sortorder = 'asc';
                } else {
                    this.selectData.sortorder = 'desc';
                }
                this.selectData.selectSortIndex = 0;
            } else {
                if (index === 2) {
                    this.selectData.sortorder = 'desc';
                } else {
                    this.selectData.sortorder = 'asc';
                }
                this.selectData.selectSortIndex = index;
            }
            this.onPulldownTop();
        },
        confirmSelect() {
            this.isSizer = false;
            this.onPulldownTop();
        },
        getMallTypeList() {
            this.$axios.get(`/app/api/trainee/im/catalog/all`).then(res => {
                if (res.data) {
                    this.mallTypeList = [...this.mallTypeList, ...res.data];
                }
            });
        },
        /**
         * 获取用户积分
         */
        getUserCredit() {
            this.$axios.get('/app/credit/user').then((res) => {
                if (res.data) {
                    this.userCredit = res.data;
                }
            });
        },
        getMallList(option) {
            let data = {
                imcId: this.selectData.selectMallType,
                impExchangeRangeStart: this.creditScopeList[this.selectData.selectCredit].start,
                impExchangeRangeEnd: this.creditScopeList[this.selectData.selectCredit].end
            };
            let params = {
                pageNo: this.pageNo
            };
            if (this.selectData.sortname !== null) {
                params.sortname = this.selectData.sortname;
                params.sortorder = this.selectData.sortorder;
            }
            this.$axios.post('/app/api/trainee/im/product/list', data, { params: params }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.list = res.data.results;
                    } else {
                        this.list = [...this.list, ...res.data.results];
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.list.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            this.list = [];
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getMallList('refresh');
                this.isRefresh = false;
            }, 900);
        }
    }
};
</script>

<style scoped lang="less">
    .mall-list {
        height: 100%;
        .mall-info {
            position: relative;
            width: 100%;
            height: 190px;
            z-index: 2;
            .bg-banner {
                width: 100%;
                height: 100%;
                background: url(../../../static/images/mall.png) no-repeat center center;
                background-size: cover;
                position: absolute;
                /*z-index: 3;*/
            }
            .user-credit {
                position: absolute;
                top: 50%;
                left: 10%;
                color: #fff;
            }
        }
        .is-fixed {
            position: fixed !important;
            top: 56px;
            width: 100%;
        }
        .mall-top {
            background: #fff;
            position: relative;
            z-index: 1;
            .top-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: #fff;
                &>div {
                    width: 50%;
                    height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    border-bottom: 1px solid #EFEFEF;;
                    &>span:first-child {
                        background: #EEEEEE;
                        width: 36px;
                        height: 36px;
                        border-radius: 50%;
                        line-height: 36px;
                        margin-right: 10px;
                        text-align: center;
                    }
                    &:first-child:after {
                        content: '';
                        width: 1px;
                        height: 30px;
                        background: #EFEFEF;
                        display: inline-block;
                        position: absolute;
                        right: 0;
                    }
                }
            }
            .type-bars {
                position: relative;
                background: #fff;
                .type-bar {
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 15px;
                    .flex-center {
                        display: flex;
                        align-items: center;
                        &>span {
                            margin-right: 2px;
                        }
                    }
                    .handle-bar {
                        &>div:first-child {
                            margin-right: 15px;
                        }
                        .isSelectSort {
                            color: #075ebb;
                        }
                    }
                }
                .sizer-body {
                    position: relative;
                    width: 100%;
                    .sizer-box {
                        position: fixed;
                        height: 100vh;
                        background: rgba(0,0,0,0.5);
                        width: 100%;
                        top: 0;
                        z-index: -1;
                    }
                    .sizer-info {
                        position: absolute;
                        background: #fff;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 300px;
                        /deep/.van-button {
                            width: 80%;
                        }
                        .type-scope {
                            padding: 10px 15px;
                            &>div:first-child {
                                margin-bottom: 10px;
                            }
                            .type-list {
                                display: flex;
                                align-items: center;
                                flex-wrap: wrap;
                                height: 80px;
                                overflow-y: auto;
                                .list-item {
                                    margin-right: 10px;
                                    padding: 0 10px;
                                    margin-bottom: 10px;
                                    background: #E6E6E6;
                                    color: #737373;
                                    border-radius: 5px;
                                    // height: 30px;
                                    line-height: 30px;
                                }
                                .isSelect {
                                    color: #fff;
                                    background: #075ebb;
                                }
                            }
                            &:not(:first-child) {
                                padding-top: 0;
                            }
                        }
                        /deep/.type-btn{
                            .van-button--info{
                                background-color: #075ebb;
                                border: 1px solid #075ebb;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
